<template>
    <div>
        <div class="jiben">
            <div class="jiben-h">
                <span>基本信息</span>
                <span style="float: right;">订单号：{{ lookList.id }}</span>
            </div>
            <div class="jiben-t">
                <el-descriptions column="4" style="padding-top:20px;">
                    <el-descriptions-item label="订单类型"><span>{{ lookList.orderType }}</span></el-descriptions-item>
                    <el-descriptions-item label="客户名称"><span>{{ lookList.clientName }}</span></el-descriptions-item>
                    <el-descriptions-item label="业务员"><span>{{ lookList.salesman }}</span></el-descriptions-item>
                    <el-descriptions-item label="出货仓库"> <span>{{ lookList.wareHouse }}</span></el-descriptions-item>
                    <el-descriptions-item label="发货时间"><span>{{ lookList.createTime }}</span></el-descriptions-item>
                    <el-descriptions-item label="销售类型"><span>{{ lookList.sellType }}</span> </el-descriptions-item>
                    <el-descriptions-item label="配送车辆"><span>{{ lookList.car }}</span> </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="shangpin">
                <div class="jiben-h">
                    <span>商品明细</span>
                </div>
                <div class="list-content">
                    <el-table ref="multipleTable" :data="lookData" border tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column prop="id" label="序号" width="200">
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称" width="200">
                        </el-table-column>
                        <el-table-column prop="bigUnit" label="单价/大单位" width="200">
                        </el-table-column>
                        <el-table-column prop="bigCount" label="数量" width="120">
                        </el-table-column>
                        <el-table-column prop="smallUnit" label="小单位价格" width="120">
                        </el-table-column>
                        <el-table-column prop="smallCount" label="数量" width="120">
                        </el-table-column>
                        <el-table-column prop="goodsType" label="商品类型" width="200">
                        </el-table-column>
                        <el-table-column prop="money" label="金额">
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px;height:20px;">
                        <h3 style=" float: left; margin-right:50px;">商品共：{{ getnumber }}</h3>
                        <h3 style=" float: left;">金额合计：{{ getMoney }}</h3>
                    </div>
                </div>
            </div>
            <div>
                <div class="jiben-h">
                    <span>付款信息</span>
                </div>
                <div class="jiben-t">
                    <el-descriptions column="1" style="padding-top:20px">
                        <el-descriptions-item label="付款类型"><span>{{ lookList.paymentTypes }}</span></el-descriptions-item>
                        <el-descriptions-item label="优惠金额"><span>0元</span></el-descriptions-item>
                        <el-descriptions-item label="应付款金额"><span>{{ getMoney }}元</span></el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.jiben-h {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    background-color: rgba(243, 243, 243);
    line-height: 48px;
    padding: 0 5%;
}

.jiben-t {
    border: 1px solid rgb(228, 228, 228);
    padding: 0 5%;
}

.shangpin {
    padding-top: 20px;
}

.list-content {
    padding-bottom: 60px;
}
</style>

<script>
import { LookListApi } from '@/http/xiaoShou/LookList.js'
export default {
    data() {
        return {
            lookList: {},
            lookData: [],
        }
    },
    created() {
        this.getInto()
    },
    methods: {
        //渲染界面
        getInto() {
            console.log(this.$route.query.id, 7777)
            LookListApi(this.$route.query.id)
                .then((res) => {
                    console.log(res.data.order)
                    this.lookList = res.data.order;
                    this.lookData = res.data.data
                })
                .catch((err) => {
                    console.log('获取列表失败', err)
                })
        }
    },
    computed: {
        getMoney() {
            return this.lookData.reduce((sum, obj) => {
                return sum += +obj.money
            }, 0)
        },
        getnumber() {
            return this.lookData.reduce((sum, obj) => {
                return sum += +obj.smallCount
            }, 0)
        },
        
    }
}
</script>